---
import { cn } from '~/lib/utils'
import { POSTS_CONFIG } from '~/config'
import type { CollectionEntry } from 'astro:content'

interface Props {
  class?: string
  post: CollectionEntry<'posts'>
  posts: CollectionEntry<'posts'>[]
}

const { class: className, post, posts } = Astro.props

// 计算文章在第几页
const postIndex = posts.findIndex((p) => p.id === post.id)
const pageSize = POSTS_CONFIG.postPageConfig.size
const pageNumber = Math.floor(postIndex / pageSize) + 1
const pageUrl = pageNumber === 1 ? '/posts' : `/posts/${pageNumber}`
---

<a
  href={pageUrl}
  class={cn(
    'group flex items-center gap-2 px-3 py-2 bg-primary/4 hover:bg-primary/10 text-primary/70 hover:text-primary transition-colors duration-200 dark:bg-primary/10 dark:hover:bg-primary/15',
    className
  )}
  aria-label={POSTS_CONFIG.backToPostsText}
>
  <span class="icon-[ph--arrow-left] size-4 transition-transform duration-200 group-hover:-translate-x-0.5"></span>
  <span class="text-sm font-medium">{POSTS_CONFIG.backToPostsText}</span>
</a>
